<template>
  <!-- 加载状态 -->
  <div v-if="isLoading" class="flex items-center justify-center h-32">
    <div class="animate-spin rounded-full h-6 w-6 border-2 border-blue-500 border-t-transparent" />
  </div>

  <!-- 错误状态 -->
  <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-4">
    <p class="text-red-700 text-sm">{{ error }}</p>
  </div>

  <!-- 正常状态 -->
  <div v-else-if="twinState" class="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
    <h3 class="text-lg font-medium text-gray-900 mb-4">学习状态分析</h3>

    <!-- 指标卡片 -->
    <div class="grid grid-cols-2 gap-4 mb-6">
      <div class="bg-blue-50 rounded-lg p-3">
        <div class="flex items-center">
          <Clock class="h-5 w-5 text-blue-500 mr-2" />
          <span class="text-sm text-blue-700">学习时长</span>
        </div>
        <p class="text-xl font-semibold text-blue-900 mt-1">
          {{ Math.round(twinState.learningMetrics.timeSpent / 60) }} 分钟
        </p>
      </div>

      <div class="bg-green-50 rounded-lg p-3">
        <div class="flex items-center">
          <Target class="h-5 w-5 text-green-500 mr-2" />
          <span class="text-sm text-green-700">正确率</span>
        </div>
        <p class="text-xl font-semibold text-green-900 mt-1">
          {{ calculateAccuracy(twinState.learningMetrics) }}%
        </p>
      </div>

      <div class="bg-purple-50 rounded-lg p-3">
        <div class="flex items-center">
          <Activity class="h-5 w-5 text-purple-500 mr-2" />
          <span class="text-sm text-purple-700">操作次数</span>
        </div>
        <p class="text-xl font-semibold text-purple-900 mt-1">
          {{ twinState.operations.length }}
        </p>
      </div>

      <div class="bg-yellow-50 rounded-lg p-3">
        <div class="flex items-center">
          <Brain class="h-5 w-5 text-yellow-500 mr-2" />
          <span class="text-sm text-yellow-700">使用提示</span>
        </div>
        <p class="text-xl font-semibold text-yellow-900 mt-1">
          {{ twinState.learningMetrics.hints }} 次
        </p>
      </div>
    </div>

    <!-- 最近操作和学习进度 -->
    <div class="space-y-4">
      <div>
        <h4 class="text-sm font-medium text-gray-700 mb-2">最近操作</h4>
        <div class="space-y-2">
          <motion-div
            v-for="(op, index) in recentOperations"
            :key="op.timestamp"
            :initial="{ opacity: 0, x: -20 }"
            :animate="{ opacity: 1, x: 0 }"
            class="flex items-center justify-between text-sm p-2 bg-gray-50 rounded"
          >
            <span class="text-gray-600">{{ op.type }}</span>
            <span class="text-gray-400">
              {{ formatTime(op.timestamp) }}
            </span>
          </motion-div>
        </div>
      </div>

      <div>
        <h4 class="text-sm font-medium text-gray-700 mb-2">学习进度</h4>
        <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
          <motion-div
            class="h-full bg-blue-500"
            :initial="{ width: 0 }"
            :animate="{ width: `${(twinState.learningMetrics.correctSteps / 10) * 100}%` }"
            :transition="{ duration: 0.5 }"
          />
        </div>
        <p class="text-xs text-gray-500 mt-1">
          已完成 {{ twinState.learningMetrics.correctSteps }} 个正确步骤
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { 
  Activity, 
  Brain, 
  Clock, 
  Target 
} from 'lucide-vue-next';

const motionDiv = motion('div');

const props = defineProps({
  twinState: {
    type: Object,
    default: null,
    validator: (value) => {
      if (!value) return true;
      return (
        value.learningMetrics &&
        value.operations &&
        Array.isArray(value.operations)
      );
    }
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: null
  }
});

// 计算最近3条操作
const recentOperations = computed(() => {
  if (!props.twinState) return [];
  return props.twinState.operations.slice(-3);
});

// 计算正确率
const calculateAccuracy = (metrics) => {
  const total = metrics.correctSteps + metrics.incorrectSteps;
  return total > 0 ? Math.round((metrics.correctSteps / total) * 100) : 0;
};

// 格式化时间
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString();
};
</script>

<style scoped>
/* 自定义样式 */
</style>
